<template>
  <button @click="setSonTestMsg">修改子组件变量</button>
  <zi
    style="background-color: aquamarine; color: #fff"
    src="https://so.gitee.com/static/logo.svg"
    :params="ziParams"
    ref="ziDom"
  ></zi>
</template>
<script setup>
import zi from "./zi.vue";
import { ref, provide } from "vue";
const ziParams = ref("父组件的变量");
const ziDom = ref(null);
function setSonTestMsg() {
  ziDom.value.testMsg = new Date().getTime();
}
provide("test", "父组件的变量-provide");
// this.$children v3移除了
// import { ref,reactive,watch } from "vue"
// const textVal = ref("")
// const objVal = reactive({
//     name:123
// })
// const iptDom = ref(null)
// console.log(iptDom.value,15)
// // 1 reactive 定义基本数据类型不具备响应式
// // 2 reactive 只能定义 复杂数据类型才具备响应式
// // 3 ref 定义的变量 必须使用.value进行获取和设置 值
// // 4 ref 还可以找对象 DOM
// let objTestVal = reactive("123")

// function setVal(){
//     objVal.name = new Date().getTime()
//     objTestVal = new Date().getTime()
//     textVal.value = new Date().getTime()
//     console.log(iptDom.value)
// }

// watch(objVal,(val)=>{
//     console.log(objTestVal,24)
// })
// watch(textVal,(val)=>{
//     console.log(textVal,27)
// })

// 事件循环机制 Event Loop
// js 是单线程的  执行顺序 由上向下 （主线程）
// 微任务（.then .catch .finally .all .race ... async await） 宏任务 (dom渲染，请求队列，定时器相关)
// console.log(1)
// setTimeout(()=>{
//     console.log(2)
// },0)
// console.log(3)
// new Promise((resolve, reject) => {
//     console.log(4)
//     resolve()
// }).then(e=>{
//     console.log(5)
// })

// 1 3 4 5 2
// 创建前 配置准备好
// 后 {data,methods,watch}
// 挂载前 new vue( {data,methods,watch})
// 后 dom 生成了
// 更新前
// 后
// 销毁前
// 后
// B/S 运行在浏览器上的项目 都是b/s架构 C/S 不基于浏览器的项目是c/s 架构
// data(){
//     return {
//         name:"222"
//     }
// }
// vue2 基于 Object.defineProperty
// let obj ={ name:123,age:18}
// Object.defineProperty(obj,"name",{
//     get(){
//         let a
//         if(document.getElementById("wenben")){
//             a=document.getElementById("wenben").value
//         }
//         // console.log(document.getElementById("wenben"))
//         return a
//     },
//     set(val){
//         console.log("set")
//         document.getElementById("wenben").value = val
//         this._name = val
//     }
// })

// console.log(obj.name)
// function setVal(){
//    console.log(obj.name,82)
//    obj.name="1234567890"
//    obj.age=20
// }

// data(){
//     return {
//         obj:{name:1232}
//     }
// }
// this.obj.age=123
// this.$set

// proxy

// new Date()
// js 数据类型
//  基本数据类型 number string Boolean null undefined symbol BigInt
//  复杂数据类型 object array function date 正则 blob

//  定义一个变量的时候  变量名 指针 值
//  基本数据类型        栈内存
//  复杂数据类型      变量名和指针存栈内存 值存在堆内存
</script>
